<template>
  <div class="update-gender">
     <van-picker
        title="标题"
        :columns="columns"
        :default-index="1"
        @cancel="$emit('close')"
        @confirm="onConfirm"
        @change="onChange"
        v-model="genderArr"
        /> 
  </div>
</template>

<script>
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
import { updateUserProfile } from '@/apis/user'
export default {
    name:'UpdateGender',
    props: {
        gender: {
            type: Array,
            required:true
        }
    },
    data() {
        return {
            columns:[ { text: '男', value: '0' },{ text: '女', value: '1' }],
            localGender:0,
            genderArr:[{ text: '女', value: '1' }]
        }
    },
    methods: {
        async onConfirm(e){
            const { selectedValues } = e;
            showLoadingToast('正在修改...')
            try {
                await updateUserProfile({
                    gender:selectedValues[0]
                })
                this.$emit('change-confirm',this.localGender)
                this.$emit('close')
                showSuccessToast('修改成功')
            } catch (error) {
                console.log(error);
                showFailToast('修改失败')
            }
        },
        onChange(e) {
            const { selectedValues } = e;
            this.localGender = selectedValues
        }
    }
}
</script>

<style>

</style>